.frame {
  position: absolute;
  width: 400px;
  height: 400px;
  inset: 0;
  margin: auto;
  overflow: hidden;
  background-color: #222;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  color: #fff;
}

.rect {
  box-sizing: border-box;
  position: absolute;
  border: 1px solid #888;
  background-color: #222;
  inset: 0;
  margin: auto;
}

.rect-1 {
  z-index: 1;
  width: 200px;
  height: 200px;
  border-color: rgb(78, 78, 78);
  animation: rotate 2s ease-in-out 0.0333333333s alternate infinite;
}

.rect-2 {
  z-index: 1;
  width: 190px;
  height: 190px;
  border-color: rgb(86, 86, 86);
  animation: rotate 2s ease-in-out 0.0666666667s alternate infinite;
}

.rect-3 {
  z-index: 1;
  width: 180px;
  height: 180px;
  border-color: rgb(94, 94, 94);
  animation: rotate 2s ease-in-out 0.1s alternate infinite;
}

.rect-4 {
  z-index: 1;
  width: 170px;
  height: 170px;
  border-color: rgb(102, 102, 102);
  animation: rotate 2s ease-in-out 0.1333333333s alternate infinite;
}

.rect-5 {
  z-index: 1;
  width: 160px;
  height: 160px;
  border-color: rgb(110, 110, 110);
  animation: rotate 2s ease-in-out 0.1666666667s alternate infinite;
}

.rect-6 {
  z-index: 1;
  width: 150px;
  height: 150px;
  border-color: rgb(118, 118, 118);
  animation: rotate 2s ease-in-out 0.2s alternate infinite;
}

.rect-7 {
  z-index: 1;
  width: 140px;
  height: 140px;
  border-color: rgb(126, 126, 126);
  animation: rotate 2s ease-in-out 0.2333333333s alternate infinite;
}

.rect-8 {
  z-index: 1;
  width: 130px;
  height: 130px;
  border-color: rgb(134, 134, 134);
  animation: rotate 2s ease-in-out 0.2666666667s alternate infinite;
}

.rect-9 {
  z-index: 1;
  width: 120px;
  height: 120px;
  border-color: rgb(142, 142, 142);
  animation: rotate 2s ease-in-out 0.3s alternate infinite;
}

.rect-10 {
  z-index: 1;
  width: 110px;
  height: 110px;
  border-color: rgb(150, 150, 150);
  animation: rotate 2s ease-in-out 0.3333333333s alternate infinite;
}

.rect-11 {
  z-index: 1;
  width: 100px;
  height: 100px;
  border-color: rgb(158, 158, 158);
  animation: rotate 2s ease-in-out 0.3666666667s alternate infinite;
}

.rect-12 {
  z-index: 1;
  width: 90px;
  height: 90px;
  border-color: rgb(166, 166, 166);
  animation: rotate 2s ease-in-out 0.4s alternate infinite;
}

.rect-13 {
  z-index: 1;
  width: 80px;
  height: 80px;
  border-color: rgb(174, 174, 174);
  animation: rotate 2s ease-in-out 0.4333333333s alternate infinite;
}

.rect-14 {
  z-index: 1;
  width: 70px;
  height: 70px;
  border-color: rgb(182, 182, 182);
  animation: rotate 2s ease-in-out 0.4666666667s alternate infinite;
}

.rect-15 {
  z-index: 1;
  width: 60px;
  height: 60px;
  border-color: rgb(190, 190, 190);
  animation: rotate 2s ease-in-out 0.5s alternate infinite;
}

.rect-16 {
  z-index: 1;
  width: 50px;
  height: 50px;
  border-color: rgb(198, 198, 198);
  animation: rotate 2s ease-in-out 0.5333333333s alternate infinite;
}

.rect-17 {
  z-index: 1;
  width: 40px;
  height: 40px;
  border-color: rgb(206, 206, 206);
  animation: rotate 2s ease-in-out 0.5666666667s alternate infinite;
}

.rect-18 {
  z-index: 1;
  width: 30px;
  height: 30px;
  border-color: rgb(214, 214, 214);
  animation: rotate 2s ease-in-out 0.6s alternate infinite;
}

.rect-19 {
  z-index: 1;
  width: 20px;
  height: 20px;
  border-color: rgb(222, 222, 222);
  animation: rotate 2s ease-in-out 0.6333333333s alternate infinite;
}

.rect-20 {
  z-index: 1;
  width: 10px;
  height: 10px;
  border-color: rgb(230, 230, 230);
  animation: rotate 2s ease-in-out 0.6666666667s alternate infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(306deg);
  }
}